<template>
    <div class="cashDetail flexv">
        <!-- 头部 -->
        <pubHead title="兑换记录" ></pubHead>

        <div class="mall-record flexv" v-if="!isNone">
           <van-list v-model="loading" :finished="finished" @load="getData">
			   <div v-for="(item,index) in list" :key="index">
				   <div class="mall-top">
				   	兑换时间：{{getDateMy('yyyy-mm-dd',item.add_time)}}
				   </div>
				   <div class="mall-bottom flex">
				   	<div class="m-img">
				   		<img :src="item.image" />
				   	</div>
				   	<div class="flexv jus-c m-right">
				   		<div class="m-top twoline">
				   			{{item.title}}
				   		</div>
				   		<div class="m-bottom">
				   			{{item.pay_integral}}积分
				   		</div>
				   	</div>
				   	
				   </div>
				   <div class="mall-right flex jus-e">
				   	共{{item.num}}件商品 合计：{{item.total_integral}}积分
				   </div>
			   </div>
            </van-list>
        </div>

        <!-- 空列表 -->
        <div class="empty_box flexc flexv" v-else>
            <img src="@/assets/distribution_empty.png" alt="">
            <p>还没有兑换记录哦~</p>
        </div>

    </div>
</template>
<script>
import Vue from 'vue';
import { Toast, List } from 'vant';
import {  getExchange } from '@/request/api';
import pubHead from '@/components/head';
Vue.use(Toast, List);
export default {
    data(){
        return{
            isNone: false,
            // 列表相关
            list: [],
            page: 0,
            pagesize: 15,
            loading: false,
            finished: false,
        }
    },
	
    components: {
        pubHead,
        "van-list": List,
    },
    created(){
        this.$loading();
    },
    methods: {
        getData(){
            this.loading = true;
            getExchange({
                page: ++this.page,
                pagesize: this.pagesize,
                token: localStorage.getItem("token")
            }).then(res =>{
                Toast.clear();
                this.loading = false
                if(res.code == 1){
                    if(res.data.list.length > 0){
						console.log(res)
                        this.list = [...this.list,...res.data.list];
                    }

                    if(this.list.length < 1){
                        this.isNone = true
                    }else{
                        this.isNone = false;
                    }
                    this.finished = Number(res.data.list.length) >= Number(this.pagesize) ? false : true;
                }
            })
        },
		getzf(num) {
			if (parseInt(num) < 10) {
				num = '0' + num;
			}
			return num;
		},
		//转换年月日方法
		getDateMy(format, str) {
			let oTime = null;
			let newStr = str * 1000;
			var oDate = new Date(newStr),
				oYear = oDate.getFullYear(),
				oMonth = oDate.getMonth() + 1,
				oDay = oDate.getDate(),
				oHour = oDate.getHours(),
				oMin = oDate.getMinutes(),
				oSec = oDate.getSeconds()
			if (format == 'yyyy-mm-dd') {
				oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay) + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin)+ ':' + this.getzf(oSec)
			} else if (format == 'yyyy/mm/dd') {
				oTime = oYear + '/' + this.getzf(oMonth) + '/' + this.getzf(oDay)
			}
			return oTime;
		}
		
    },
}
</script>
<style lang="less" scoped>
.cashDetail{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 列表
	.mall-record{
		margin-top: 0.2rem;
		padding: 0.2rem;
		background-color: #FFFFFF;
		.mall-top{
			font-size: 0.26rem;
			color: #999;
			padding-bottom: 0.2rem;
			border-bottom:0.01rem solid #ebebeb;
		}
		.mall-bottom{
			padding-top: 0.2rem;
			.m-img{
				width: 1.8rem;
				margin-right: 0.2rem;
				img{
					border-radius: 0.1rem;
				}
			}
			.m-right{
				flex: 1;
			}
			.m-top{
				font-size: 0.28rem;
				color: #333333;
			}
			.m-bottom{
				color: #EE1C1A;
				font-size: 0.28rem;
				margin-top: 0.1rem;
			}
		}
		.mall-right{
			color: #999;
			font-size: 0.24rem;
		}
	}
	// 空列表
	.empty_box{
	    height: calc(100vh - 0.88rem);
	    img{
	        width: 3.24rem;
	        height: 3.06rem;
	        margin: 0 auto;
	    }
	    p{
	        margin-top: 0.24rem;
	        font-size: 0.32rem;
	        line-height: 120%;
	        color: #666;
	    }
	}
}
</style>